<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>组织架构</span>
    </div>
    <el-table :data="organizationData" border style="width: 100%">
      <el-table-column prop="employeeId" label="员工编号"></el-table-column>
      <el-table-column prop="name" label="姓名">
        <template #default="scope">
          <img :src="scope.row.avatar" alt="头像" style="width: 40px; height: 40px; border-radius: 50%;">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="position" label="职位"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="joinDate" label="入职时间"></el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      organizationData: [
        { employeeId: 'E001', name: '张三', avatar: 'https://via.placeholder.com/40x40', position: '研发工程师', phone: '13800138000', joinDate: '2023-01-01' },
        { employeeId: 'E002', name: '李四', avatar: 'https://via.placeholder.com/40x40', position: '产品经理', phone: '13800138001', joinDate: '2023-02-01' },
        { employeeId: 'E003', name: '王五', avatar: 'https://via.placeholder.com/40x40', position: '财务主管', phone: '13800138002', joinDate: '2023-03-01' },
      ],
    };
  },
};
</script>

<style scoped>
.box-card {
  margin: 20px auto;
  width: 90%;
}
</style>
